<template>
  <view class="consultation-container">

    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 健康咨询列表 -->
      <view class="consultation-section">
        <view class="section-title">健康伙伴</view>
        <view class="chat-list">
          <view class="chat-item" v-for="(chat, index) in chatList" :key="index"
            @click="onSession(chat.user.user_id, chat.type, chat.session_id)">
            <view class="chat-avatar">
              <view class="avatar-placeholder">
                <image class="avatar-image" mode="widthFix" :src="chat.user.avatar_url.preview_url"></image>
              </view>
            </view>
            <view class="chat-content">
              <view class="chat-header">
                <text class="chat-name">{{ chat.user.name }}</text>
                <text class="chat-time">{{ chat.send_time ? chat.send_time : '' }}</text>

              </view>
              <text class="chat-message">{{ chat.text ? chat.text : '' }}</text>

            </view>
            <view class="unread-badge" v-if="chat.unread > 0">
              <text class="badge-text">{{ chat.unread }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 健康科普列表 -->
      <view class="science-section">
        <view class="section-title">健康科普</view>
        <view class="article-list">
          <view class="article-item" v-for="(article, index) in articleList" :key="index"
            @click="gotoArticelDetail(article)">
            <view class="article-content">
              <text class="article-title">{{ article.title }}</text>
              <text class="article-date">{{ article.date }}</text>
            </view>
            <view class="article-image">
              <view class="image-placeholder">
                <image :src="article.image_url" style="width: 100%; height: 100%" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <view class="bottom-tabbar">
      <view class="tab-item" @click="switchTab('health')">
        <image src="/static/tabbar/home.png" class="tab-icon home-icon" />
        <text class="tab-text">首页</text>
      </view>
      <view class="tab-item" @click="switchTab('mall')">
        <image src="/static/tabbar/shop.png" class="tab-icon home-icon" />
        <text class="tab-text">商城</text>
      </view>
      <view class="tab-item active">
        <image src="/static/tabbar/chat_active.png" class="tab-icon home-icon" />
        <text class="tab-text">健康伙伴</text>
      </view>
      <view class="tab-item" @click="switchTab('profile')">
        <image src="/static/tabbar/me.png" class="tab-icon home-icon" style="width: 54rpx; height: 68rpx;" />
        <text class="tab-text">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
import { healthChatList, chatList } from '@/api/index';
import { list as articleList } from '@/api/article';
export default {
  data() {
    return {
      statusBarHeight: 0,
      chatList: [

      ],
      articleList: [],
    };
  },

  onLoad() {
    this.getSystemInfo();

    /* 获取健康咨询列表 */
    this.getList();

    this.articleListFn();
  },

  methods: {
    gotoArticelDetail(data) {
      uni.navigateTo({
        url: '/pages/article/detail' + '?articleId=' + data.article_id,
      });
    },
    async articleListFn() {
      const _res = await articleList({
        page: 1,
      });

      console.log('文章列表', _res);
      _res?.data?.list?.data?.forEach((_r) => {
        this.articleList.push(_r);
      });
    },
    async getList() {
      const _res = await healthChatList();

      console.log('_res', _res.data.list.data);


      _res.data.list.data.forEach((_r) => {
        this.chatList.push(_r);
      });
    },
    getSystemInfo() {
      const systemInfo = uni.getSystemInfoSync();
      this.statusBarHeight = systemInfo.statusBarHeight || 0;
    },

    switchTab(tab) {
      switch (tab) {
        case 'health':
          uni.redirectTo({
            url: '/pages/health/index', success: function () {
            },
            fail: function (err) {
              console.log('跳转失败', err);


            },
          });
          break;
        case 'mall':
          uni.redirectTo({
            url: '/pages/mall/index', success: function () {
            },
            fail: function (err) {
              console.log('跳转失败', err);


            },
          });
          break;
        case 'profile':
          uni.redirectTo({
            url: '/pages/profile/index', success: function () {
            },
            fail: function (err) {
              console.log('跳转失败', err);


            },
          });
          break;
      }
    },
    // 跳转会话页面
    onSession(user_id, type, session_id) {
      console.log(session_id)
      const userID = user_id;
      let conversationID = ""
      if (type == 1) {
        conversationID = `C2C${userID}`;
      } else {
        conversationID = `GROUP${session_id}`;
      }
      // 1v1 chat: conversationID = `C2C${userID}`
      // group chat: conversationID = `GROUP${groupID}`
      // const conversationID = `C2C${userID}`;
      uni.navigateTo({
        url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}`
      });
      // console.log(123)
      // uni.navigateTo({
      //   url: '/pages/consultation/session'
      // })
    },
  },
};
</script>

<style lang="scss" scoped>
.consultation-container {
  min-height: 100vh;
  background: #f5f5f5;
  position: relative;
  padding-bottom: 140rpx;
}

.status-bar {
  background: #ffffff;
}

.consultation-navbar {
  background: #ffffff;
  height: 88rpx;
  border-bottom: 1px solid #e5e5e5;

  .navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 32rpx;

    .nav-left {
      flex: 1;
    }

    .nav-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
      text-align: center;
    }

    .nav-right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .nav-action-btn {
        width: 60rpx;
        height: 60rpx;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 16rpx;

        .action-dots,
        .action-location {
          font-size: 24rpx;
          color: #666666;
        }
      }
    }
  }
}

.content-area {
  padding: 32rpx;
}

.consultation-section {
  margin-bottom: 40rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 24rpx;
  }

  .chat-list {
    .chat-item {
      background: #ffffff;
      border-radius: 16rpx;
      padding: 24rpx;
      margin-bottom: 16rpx;
      display: flex;
      align-items: center;
      position: relative;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

      .chat-avatar {
        width: 80rpx;
        height: 80rpx;
        margin-right: 24rpx;

        .avatar-placeholder {
          width: 100%;
          height: 100%;
          background: #e3f2fd;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          font-weight: bold;
          color: #2196f3;
        }
      }

      .chat_footer {
        display: flex;
        justify-content: space-between;
      }

      .chat-content {
        flex: 1;

        .chat-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8rpx;

          .chat-name {
            font-size: 30rpx;
            font-weight: 500;
            color: #333333;
          }

          .chat-time {
            font-size: 24rpx;
            color: #999999;
          }
        }

        .chat-message {
          font-size: 26rpx;
          color: #666666;
          line-height: 1.4;
        }
      }

      .unread-badge {
        // position: absolute;
        // top: 20rpx;
        // right: 20rpx;
        background: #ff4444;
        border-radius: 50%;
        min-width: 32rpx;
        height: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 8rpx;

        .badge-text {
          font-size: 20rpx;
          color: #ffffff;
          font-weight: bold;
        }
      }
    }
  }
}

.science-section {
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 24rpx;
  }

  .article-list {
    .article-item {
      background: #ffffff;
      border-radius: 16rpx;
      padding: 24rpx;
      margin-bottom: 16rpx;
      display: flex;
      // align-items: center;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

      .article-content {
        flex: 1;
        margin-right: 24rpx;

        .article-title {
          font-size: 30rpx;
          font-weight: 500;
          color: #333333;
          margin-bottom: 12rpx;
          display: block;
          line-height: 1.4;
        }

        .article-date {
          font-size: 24rpx;
          color: #999999;
        }
      }

      // w-226rpx h-148rpx
      .article-image {
        width: 226rpx;
        height: 148rpx;
        // width: 120rpx;
        // height: 80rpx;
        // border-radius: 45rpx;
        overflow: hidden;

        .image-placeholder {
          width: 100%;
          height: 100%;
          background: #f0f0f0;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
  }
}

.bottom-tabbar {
  padding-top: 20rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  // height: 50px;
  background: #ffffff;
  display: flex;
  align-items: center;
  border-top: 1px solid #e5e5e5;
  padding-bottom: env(safe-area-inset-bottom);

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .tab-icon {
      width: 72rpx;
      height: 72rpx;
      margin-bottom: 8rpx;
      border-radius: 8rpx;

      &.home-icon {
        // background: #2196f3;
      }

      &.mall-icon {
        background: #cccccc;
      }

      &.consultation-icon {
        background: #cccccc;
      }

      &.profile-icon {
        background: #cccccc;
      }
    }

    .tab-text {
      font-size: 36rpx;
      color: rgb(153, 153, 153);
    }

    &.active .tab-text {
      color: #006BFF;
    }
  }
}
</style>
